<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 报修管理</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="container">
        <el-tabs v-model="activeNotice" @tab-click="handleClick">
          <el-tab-pane label="未处理" name="first">
            <div>
              <el-table :data="repairs1" class="table" height="350">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="bodyDesc" label="投诉内容" align="center"></el-table-column>
                <el-table-column prop="date" label="发布日期" align="center"></el-table-column>
                <el-table-column prop="familyName" label="家庭名" align="center"></el-table-column>
                <el-table-column prop="address" label="住处" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template #default="scope">
                    <div>
                      <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 页码 -->
              <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query1.page"
                               :page-size="query1.pageSize" :total="query1.pageTotal"
                               @current-change="handlePageChange1"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="处理中" name="second">
            <div>
              <el-table :data="repairs2" class="table" height="350">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="bodyDesc" label="投诉内容" align="center"></el-table-column>
                <el-table-column prop="date" label="发布日期" align="center"></el-table-column>
                <el-table-column prop="familyName" label="家庭名" align="center"></el-table-column>
                <el-table-column prop="address" label="住处" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template #default="scope">
                    <div>
                      <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 页码 -->
              <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query2.page"
                               :page-size="query2.pageSize" :total="query2.pageTotal"
                               @current-change="handlePageChange2"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="third">
            <div>
              <el-table :data="repairs3" class="table" height="350">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="bodyDesc" label="投诉内容" align="center"></el-table-column>
                <el-table-column prop="date" label="发布日期" align="center"></el-table-column>
                <el-table-column prop="familyName" label="家庭名" align="center"></el-table-column>
                <el-table-column prop="address" label="住处" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template #default="scope">
                    <div>
                      <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 页码 -->
              <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query3.page" :page-size="query3.pageSize" :total="query3.pageTotal" @current-change="handlePageChange3"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "repair",
  data() {
    return {
      repairs1: [],
      repairs2: [],
      repairs3: [],
      query1: {
        page: 1,
        pageSize: 5,
        pageTotal: 0
      },
      query2: {
        page: 1,
        pageSize: 5,
        pageTotal: 0
      },
      query3: {
        page: 1,
        pageSize: 5,
        pageTotal: 0
      },
      activeNotice: 'first'
    }
  },
  methods: {
    getRepairList(type) {
      this.$axios.get("/repairs/" + type, {params: this.query1}).then(res => {
        if (res.data.code == 200) {
          if (type == 1) {
            this.repairs1 = res.data.obj.records;
            this.query1.pageTotal = res.data.obj.total;
            this.repairs1.map(item => {
              item.bodyDesc = item.body.slice(0, 8) + "..."
            })
          } else if (type == 2) {
            this.repairs2 = res.data.obj.records;
            this.query2.pageTotal = res.data.obj.total;
            this.repairs2.map(item => {
              item.bodyDesc = item.body.slice(0, 8) + "..."
            })
          } else {
            this.repairs3 = res.data.obj.records;
            this.query3.pageTotal = res.data.obj.total;
            this.repairs3.map(item => {
              item.bodyDesc = item.body.slice(0, 8) + "..."
            })
          }
        }
      })
    },
    handleDetail(idx, row) {
      this.$router.push('/repair-desc' + row.id);
    },
    handlePageChange1(val) {
      this.query1.page = val;
      this.getRepairList(1);
    },
    handlePageChange2(val) {
      this.query2.page = val;
      this.getRepairList(2);
    },
    handlePageChange3(val) {
      this.query3.page = val;
      this.getRepairList(3);
    }
  },
  created() {
    this.getRepairList(1);
    this.getRepairList(2);
    this.getRepairList(3);
  }
}
</script>

<style scoped>

</style>